<template>
  <div id="viewer" ></div>
</template>
<script>
import PhotoSphereViewer from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
import { getShowLinklist, getShowFilePaInfo } from "@/api/show";
import { getHttpUrl } from "@/api/basic";
export default {
  props: {
    cubePic: {
      type: String,
      default: null
    },
    spList: {
      type: Array,
      default: () => []
    },
    urlBase: {
      type: String
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    }
  },
  data() {
    return {
      base_url: this.$props.urlBase,
      PSV: null,
      panorama: null,
      markers: null,
      spmarkers: null,
      splist: [],
      cjlist: [],
      splinklist: {},
      tzpanorama: null
    };
  },
  mounted() {
    if (this.PSV) {
      this.PSV.destroy();
    }
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      let splist = [];
      let list = [];
      // this.initInfo();
      if (this.tzpanorama != null) {
        this.panorama = this.base_url + "/" + this.tzpanorama;
        this.splist = this.cjlist;
      } else {
        this.panorama = this.$props.cubePic;
        this.splist = this.$props.spList;
      }
      let index = 0;
      this.splist.forEach(sp => {
        index++;
        let title = sp.title || "";
        let arrow = '<div class="arrow"><div class="arrow-inner"></div></div>';
        let dot = "";
        let right = "";
        if (sp.linktype == 1) {
          dot = '<div class="dot"></div>';
        }
        if (sp.linktype == 2) {
          right = '<div class="right"></div>';
        }
        let html = "<a><div>" + title + "</div>" + dot + right + "</a>";
        let style = {};
      
        style = Object.assign(style, sp.style);
        let marker = {
          id: sp.id || index,
          spid: sp.spid,
          longitude: sp.lon || 0,
          latitude: sp.lat || 0,
          html: html,
          style: style,
          tooltip: sp.info || "",
          linktype: sp.linktype || 0,
          PanoContent: sp.PanoContent || "",
          ShowPanoID: sp.ShowPanoID || 0
        };
        list.push(marker);
        if (sp.linktype == 1) {
          splist.push(marker);
        }
      });
      this.markers = list;
      this.spmarkers = splist;
      this.render();
    },
    initInfo() {
      this.PSV = "";
      this.markers = null;
      let marker = null;
    },
    render() {
      this.PSV = PhotoSphereViewer({
        container: document.getElementById("viewer"),
        panorama: this.panorama,
        mousewheel: false,
        time_anim: false,
        size: {
          width: this.$props.width,
          height: this.$props.height
        },
        navbar: ["markers", "caption", "fullscreen"],
        lang: { markers: "商品清单", fullscreen: "全屏" },
        markers: this.markers
      });
      this.PSV.on("dblclick", e => {
        this.$emit("onPanorama", e);
      });
      this.PSV.on("select-marker", marker => {
        if (marker.linktype == 1) {
          window.open("/#/previewproduct?id=" + parseInt(marker.spid));
        } else if (marker.linktype == 2) {
          getShowFilePaInfo(marker.spid).then(r => {
            if (r.code == 0) {
              // this.tzpanorama = r.data.FileName;
              this.tzpanorama = this.base_url + "/" + r.data.FileName;
              let list = [];
              this.PSV.clearMarkers();
              getShowLinklist(marker.spid).then(res => {
                if (res.code == 0) {
                  let LinkList = res.data;
                  if (LinkList.length != 0) {
                    LinkList.forEach(element => {
                     
                     
                      let title = "";
                      let arrow =
                        '<div class="arrow"><div class="arrow-inner"></div></div>';
                      let dot = "";
                      let right = "";
                      if (element.LinkType == 1) {
                        dot = '<div class="dot"></div>';
                      }
                      if (element.LinkType == 2) {
                        right = '<div class="right" ></div>';
                      }
                       let style = {};
                      style = Object.assign(style, element.style);
                      let html =
                        "<a><div>" + title + "</div>" + dot + right + "</a>";
                      // let marker = {
                      //   id: sp.id || index,
                      //   longitude: sp.lon || 0,
                      //   latitude: sp.lat || 0,
                      //   html: html,
                      //   style: style,
                      //   tooltip: sp.info || "",
                      //   linktype: sp.linktype || 0,
                      //   PanoContent: sp.PanoContent || "",
                      //   ShowPanoID: sp.ShowPanoID || 0
                      // };

                      
                      
                      let splinklist = {
                        id: element.ShowLinkID,
                        spid: element.RelFieldID,
                        longitude: element.LinkY,
                        latitude: element.LinkX,
                        html: html,
                        style: style,
                        tooltip:element.LinkContent,
                        linktype: element.LinkType,
                        PanoContent: element.PanoContent,
                        ShowPanoID: element.ShowPanoID
                      };
                      list.push(splinklist);
                      this.PSV.addMarker(splinklist);
                    });
                  }
                  this.PSV.setPanorama(this.tzpanorama);
                } else {
                  this.$message.error("获取列表出错！原因：" + res.msg);
                }
              });
            } else {
              this.$message.error("获取项目信息出错！原因：" + r.msg);
            }
          });
        }
      });
    },
    
  }
};
</script>
<style scoped>
#viewer >>> div[id^="psv-marker-"] a {
  display: block;
  text-align: center;
  color: white;
  line-height: 35px;
  font-size: 20px;
}
#viewer >>> div[id^="psv-addMarker-"] a {
  display: block;
  text-align: center;
  color: white;
  line-height: 35px;
  font-size: 20px;
}
#viewer >>> div[id^="psv-setPanorama-"] a {
  display: block;
  text-align: center;
  color: white;
  line-height: 35px;
  font-size: 20px;
}
#viewer >>> .dot {
  display: inline-block;
  background-color: white;
  opacity: 0.9;
  border-radius: 50%;
  box-shadow: 0 0 0 5px #fff4;
  height: 20px;
  width: 20px;
  animation: pulse 2.5s linear infinite;
}
#viewer >>> .right {
  display: inline-block;
  background-image: url(../assets/icon.png);
  height: 20px;
  width: 60px;
  background-size: 100%;
  animation: pulse 2.5s linear infinite;
}

@keyframes pulse {
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 0 7px #fff8;
  }
}
#viewer >>> .arrow-inner {
  width: 20px;
  height: 20px;
  margin: 0 auto;
  margin-top: -15px;
  border-bottom: 5px solid #fff;
  border-right: 5px solid #fff;
  transform: rotate(45deg);
  animation: jump 2s linear infinite;
}
@keyframes jump {
  25% {
    margin-top: -10px;
  }

  50%,
  100% {
    margin-top: -15px;
  }

  75% {
    margin-top: -5px;
  }
}
</style>